<template>
  <div class="setting-share-all">
    <div class="share-all-style">
      <div class="share-all-style-pic ss-pic">
        <file-upload
          class="share-all-style-pic-upload"
          :item="item"
          @change="click2GetHead"
        ></file-upload>
        <img :src="share.icon" alt />
        <a href="javascript:;">上传icon</a>
      </div>

      <div class="share-all-style-txt">
        <p class="style-txt">
          <el-input
            type="input"
            resize="none"
            :rows="1"
            placeholder="请输入内容"
            v-model="title"
            @change="check4Input('title', titleCount)"
          ></el-input>
          <span :class="{ 'is-over': title.length > titleCount }"
            >{{ title.length }}/{{ titleCount }}</span
          >
        </p>

        <p class="style-txt">
          <el-input
            type="textarea"
            resize="none"
            :rows="2"
            placeholder="请输入内容"
            v-model="desc"
            @change="check4Input('desc', descCount)"
          ></el-input>
          <span :class="{ 'is-over': desc.length > descCount }"
            >{{ desc.length }}/{{ descCount }}</span
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import FileUpload from "@/views/components/file-upload.vue";
import { useWebSiteStore } from '@/store/web/site'
import { MEDIAS } from "@/const/web/";

export default {
  setup() {
    const state = reactive({
      title: "",
      desc: "",
    });
    const state_ = {
      titleCount: 48,
      descCount: 60,
      item: {
        uploadTxt: "",
        type: MEDIAS.image.type,
        isIcon: true,
      },
    };
    _.merge(state, state_);
    return state;
  },
  props: {
    share: {
      type: Object,
      default: null,
    },
  },
  components: {
    FileUpload,
  },
  mounted() {
    this.title = this.share.allShare.title;
    this.desc = this.share.allShare.desc;
  },
  methods: {
    click2GetHead(data) {
      this.share.icon = data.url;
      this.onChange();
    },
    check4Input(valType, count) {
      if (valType == "title") {
        this.title = this.title.substring(0, count);
      }
      if (valType == "desc") {
        this.desc = this.desc.substring(0, count);
      }
      // this.share.allShare[valType] = this.share.allShare[valType].substring(0, count);
      this.onChange();
    },
    onChange() {
      const useWebSite = useWebSiteStore()
      if (useWebSite.sitePreview.isEditSite) {
        useWebSite.updateSettingShare({
          allShare: {
            title: this.title,
            desc: this.desc,
          },
          icon: this.share.icon,
        });
      } else {
        useWebSite.updateOtherSettingShare({
          allShare: {
            title: this.title,
            desc: this.desc,
          },
          icon: this.share.icon,
        });
      }
      this.$emit("change");
    },
  },
};
</script>

<style lang="scss">
.share-all-style {
  position: relative;
  display: flex;
  padding: 22px 56px 22px 37px;

  .share-all-style-pic {
    position: relative;
    width: 102px;
    height: 102px;

    .share-all-style-pic-upload {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 1;

      div {
        width: 100%;
        height: 100%;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    a {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 10px;
      color: #fff;
      background-color: rgba(67, 71, 92, 0.5);
      padding: 4px 0;
      text-align: center;
    }
  }

  .share-all-style-txt {
    min-width: 0;
    flex: 1;
    margin-left: 12px;

    p:first-child {
      margin-bottom: 10px;
    }
    .style-txt {
      position: relative;
      font-size: 12px;
      display: flex;

      .el-textarea,
      .el-input {
        font-size: 12px !important;
        flex: 1;
        min-width: 0;

        input {
          height: 30px !important;
          line-height: 30px !important;
          padding-right: 38px;
        }

        textarea {
          line-height: 2 !important;
        }
      }

      label {
        width: 72px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #43475c;
      }

      span {
        position: absolute;
        right: 6px;
        bottom: 2px;
        font-size: 12px;
        color: #a5afbe;
        line-height: 25px;
      }

      .is-over {
        color: #eb3c2a !important;
      }
    }
  }
}
</style>
